<template>
  <view>
    <view class="search-box">
      <MySearch bgc="#f7f7f7" radius="80" width="650" height="60" text="搜索商品"></MySearch>
      <view @click="toggle">
        <uni-icons v-if="blockView" type="list" size="26"></uni-icons>
        <uni-icons v-else type="images-filled" size="26"></uni-icons>
      </view>
    </view>

    <view class="sort-box">
      <view :class="{active: sortType === 'all'}" @click="allSort" mark:sortType="all">综合</view>
      <view :class="{active: sortType === 'sales'}" @click="salesSort" mark:sortType="sales">销量</view>
      <view class="price-sort" @click="priceSort" mark:sortType="price">
        <view :class="{active: sortType === 'price'}">价格</view>
        <view :class="{top:true,active: sortPrice === '0' && sortType === 'price'}">^</view>
        <view :class="{bottom:true,active: sortPrice === '1' && sortType === 'price'}">^</view>
      </view>
    </view>

    <view v-if="!productList[0]" class="no-data">亲，暂无相关数据</view>

    <view :class="{'block-view': blockView,'list-view': !blockView}">
      <view class="product-item" v-for="item in productList" :key="item.goods_id" @click="goDetailPage(item.goods_id)">
        <view class="pic"><image :src="item.goods_image"></image></view>
        <view class="list-right">
          <view class="title">{{item.goods_name}}</view>
          <view class="sold" v-if="!blockView">已售{{item.goods_sales}}件</view>
          <view class="price">
            <text class="new-price">￥{{item.goods_price_max}}</text>
            <text v-if="item.line_price_max!=='0.00'" class="old-price">￥{{item.line_price_max}}</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import MySearch from '@/components/MySearch'

export default {
  components:{
    MySearch
  },
  data(){
    return {
      productList:[],
      blockView: true,
      sortType: 'all',
      sortPrice:'',
      categoryId:'',
      goodsName:'',
      page:'',
    }
  },
  onLoad({cid,keyword}){
    this.blockView = uni.getStorageSync('zhmall-custom-style')
    if(cid) {
      this.categoryId = cid
      this.getProductList()   
    }
    if(keyword) {
      this.goodsName = keyword
      this.getProductList()
    }
  },
  methods:{
    toggle(){
      this.blockView = !this.blockView
      uni.setStorageSync('zhmall-custom-style', this.blockView)
    },
    async allSort(e){
      this.sortType = e.mark.sortType
      this.getProductList()
    },
    salesSort(e){
      this.sortType = e.mark.sortType
      this.getProductList()
    },
    priceSort(e){
      this.sortType = e.mark.sortType
      if(!this.sortPrice) {
        this.sortPrice = '0'
      } else {
        this.sortPrice = this.sortPrice === '1' ? '0' : '1'
      }
      this.getProductList()  
    },
    async getProductList(){
      const {data} = await this.$http.get('/goods/list',{
        sortType:this.sortType,
        sortPrice:this.sortPrice,
        categoryId:this.categoryId,
        goodsName:this.goodsName,
        page:this.page
      })
      this.productList = data.list.data
    },
    goDetailPage(gid){
      uni.navigateTo({
        url:'/pages_sub1/product-detail/product-detail?gid=' + gid
      })
    }
  }
}
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
  }
  image {
    width: 100%;
    height: 100%;
  }
  .active {
    color: #e49a3d;
  }
  .search-box{
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    background-color: #fff;
  }
  .sort-box{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90rpx;
    background-color: #fff;
    font-size: 28rpx;
    .price-sort{
      position: relative;
      .top{
        position: absolute;
        top: -5rpx;
        right: -35rpx;
        font-size: 30rpx;
      }
      .bottom{
        position: absolute;
        bottom: -8rpx;
        right: -35rpx;
        transform: rotate(180deg);
        font-size: 30rpx;
      }
    }
  }
  .block-view {
    display: flex;
    flex-wrap: wrap;
    .product-item {
      box-sizing: border-box;
      margin: 10rpx;
      padding: 10rpx;
      width: 46%;
      height: 460rpx;
      background-color: #fff;
      .pic{
        width: 320rpx;
        height: 320rpx;
      }
    }
  }
  .list-view {
    padding: 0 20rpx;
    .product-item {
      display: flex;
      margin-bottom:20rpx;
      height: 260rpx;
      background-color: #fff;
      .pic{
        width: 240rpx;
        height: 240rpx;
      }
      .list-right {
        box-sizing: border-box;
        margin-left: 48rpx;
        width: 420rpx;
        padding: 10rpx;
        .sold {
          margin: 20rpx 0 5rpx;
          font-size: 22rpx;
          color: #9999b3;
        }
      }
    }
  }
  .title {
    margin: 5rpx 0;
    height: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 24rpx;
  }
  .new-price{
    color: #fa2209;
    font-size: 30rpx;
  }
  .old-price{
    margin-left: 20rpx;
    text-decoration: line-through;
    font-size: 24rpx;
    color: #989898;
  }
  .no-data {
    margin: 300rpx auto;
    text-align: center;
  }

</style>